<template>
  <el-dialog :append-to-body="true" :visible.sync="dialog" :title="isAdd ? '新增' : '编辑'" width="600px">
    <el-form ref="form" :inline="true" :model="form" :rules="rules" size="small" label-width="80px">
      <el-form-item label="地图名称">
        <el-input :value="mapInfo.mapName" :disabled="true" class="form_input_row"/>
      </el-form-item>
      <el-form-item label="设备名称">
        <el-select v-model="form.deviceUid" @change="changeDevice" class="form_input" placeholder="请选择">
          <el-option
            v-for="(item, index) in dict.device"
            :disabled="(!item.position_id)||(item.device_id + '_'+item.device_type===form.deviceSUid)?false:true"
            :key="item.device_id + '_'+item.device_type"
            :label="item.device_name"
            :value="item.device_id+'_'+item.device_type"/>
        </el-select>
      </el-form-item>
      <el-form-item label="设备类型">
        <svg-icon :icon-class="form.deviceType" style="font-size: 20px;"/>{{dict.deviceTypeDict?dict.deviceTypeDict[form.deviceType]:''}}
      </el-form-item>
      <el-form-item label="距左侧">
        <el-input :value="(mapInfo.mapRealWidth*form.positionLeft/100).toFixed(2)+'米'" class="form_input"
                  :disabled="true"/>
      </el-form-item>
      </el-form-item>
      <el-form-item label="距上侧">
        <el-input :value="(mapInfo.mapRealHeight*form.positionTop/100).toFixed(2)+'米'" class="form_input"
                  :disabled="true"/>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button :loading="loading" type="danger" @click="doDel" style="float:left">删除</el-button>
      <el-button type="text" @click="cancel">取消</el-button>
      <el-button :loading="loading" type="primary" @click="doSubmit">确认</el-button>
    </div>
  </el-dialog>
</template>

<script>
  import {add, edit,del} from '@/api/devicePosition'
  export default {
    props: {
      isAdd: {
        type: Boolean,
        required: true
      },
      dict: {
        type: Object,
        default: null
      },
      mapInfo: {
        type: Object,
        required: true
      },
      position_this: {
        type: Object,
        required: true
      }
    },
    data() {
      return {
        loading: false, dialog: false,
        form: {
          id: '',
          mapId:  '',
          deviceId: '',
          deviceUid: '',
          deviceSUid:  '',
          deviceType: '',
          positionLeft:  '',
          positionTop:  '',
          creator: '',
          createTime: '',
          updator: '',
          updateTime:  ''
        },
        rules: {}
      }
    },
    created() {

    },
    methods: {
      changeDevice(item)
      {
        let id_type = item.split("_");
        this.form.deviceId = id_type[0];
        this.form.deviceType = id_type[1];
        console.log(id_type);
        console.log(this.form);
      },
      cancel()
      {
        this.resetForm()
      }
      ,
      doSubmit()
      {
        this.loading = true
        if (this.isAdd) {
          this.doAdd()
        } else this.doEdit()
      }
      ,
      doAdd()
      {
        add(this.form).then(res => {
          this.resetForm()
          this.$notify({
            title: '添加成功',
            type: 'success',
            duration: 2500
          })
          this.loading = false
          this.position_this.list()
        }).catch(err => {
          this.loading = false
          console.log(err.response.data.message)
        })
      }
      ,
      doEdit()
      {
        edit(this.form).then(res => {
          this.resetForm()
          this.form.deviceSUid=this.form.deviceUid
          this.$notify({
            title: '修改成功',
            type: 'success',
            duration: 2500
          })
          this.loading = false
          this.position_this.list()
        }).catch(err => {
          this.loading = false
          console.log(err.response.data.message)
        })
      }
      ,doDel()
      {
        this.$confirm('确定删除此设备?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          del(this.form.id).then(res => {
            this.resetForm()
            this.form.deviceSUid=this.form.deviceUid
            this.$notify({
              title: '删除成功',
              type: 'success',
              duration: 2500
            })
//            this.$message({
//              type: 'success',
//              message: '删除成功!'
//            });
            this.loading = false
            this.position_this.list()
          }).catch(err => {
            this.loading = false
            console.log(err.response.data.message)
          })

        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      }
      ,
      resetForm()
      {
        this.dialog = false
        this.$refs['form'].resetFields()
        this.form = {
          id: '',
          mapId:  '',
          deviceId: '',
          deviceUid: '',
          deviceSUid:  '',
          deviceType: '',
          positionLeft:  '',
          positionTop:  '',
          creator: '',
          createTime: '',
          updator: '',
          updateTime:  ''
        }
      }
    }
  }
</script>

<style scoped>
  .form_input {
    width: 180px;
  }

  .form_input_row {
    width: 455px;
  }
</style>
